<template>
    <div class="manage-characters-page">
        <el-card>
            <h2 style="text-align: center; margin-bottom: 24px">
                角色数据管理
            </h2>
            <div
                style="
                    display: flex;
                    gap: 16px;
                    align-items: center;
                    margin-bottom: 16px;
                "
            >
                <el-input
                    v-model="searchName"
                    placeholder="搜索角色名称"
                    clearable
                    style="width: 200px"
                />
            </div>
            <el-table :data="pagedCharacters" style="width: 100%">
                <el-table-column prop="name" label="角色名称" width="120" />
                <el-table-column prop="title" label="角色职位" width="120" />
                <el-table-column prop="avatar" label="头像" width="80">
                    <template #default="scope">
                        <el-image
                            v-if="scope.row.avatar"
                            :src="scope.row.avatar"
                            style="width: 3rem; height: 3rem"
                            fit="cover"
                            :preview-src-list="[scope.row.avatar]"
                            preview-teleported
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="desc" label="简介" width="180" />
                <el-table-column
                    prop="rightText"
                    label="小视频下方介绍"
                    width="180"
                />
                <el-table-column prop="bgVideo" label="背景视频" width="280">
                    <template #default="scope">
                        <video
                            v-if="scope.row.bgVideo"
                            :src="scope.row.bgVideo"
                            style="width: 16rem"
                            controls
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="leftImg" label="图片" width="80">
                    <template #default="scope">
                        <el-image
                            v-if="scope.row.leftImg"
                            :src="scope.row.leftImg"
                            style="width: 5rem"
                            fit="contain"
                            :preview-src-list="[scope.row.leftImg]"
                            preview-teleported
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="frameImg" label="头像框" width="80">
                    <template #default="scope">
                        <el-image
                            v-if="scope.row.frameImg"
                            :src="scope.row.frameImg"
                            style="width: 3rem; height: 3rem"
                            fit="cover"
                            :preview-src-list="[scope.row.frameImg]"
                            preview-teleported
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="videoRight" label="视频2" width="280">
                    <template #default="scope">
                        <video
                            v-if="scope.row.videoRight"
                            :src="scope.row.videoRight"
                            style="width: 16rem"
                            controls
                        />
                    </template>
                </el-table-column>
                <el-table-column
                    prop="sortByNumber"
                    label="出现顺序"
                    width="60"
                />
                <el-table-column label="操作" width="180">
                    <template #default="scope">
                        <el-button
                            size="small"
                            type="primary"
                            @click="openEdit(scope.row)"
                            round
                            >编辑</el-button
                        >
                        <el-popconfirm
                            title="确定删除该角色数据吗？"
                            @confirm="handleDelete(scope.row)"
                            confirm-button-text="删除"
                            cancel-button-text="取消"
                        >
                            <template #reference>
                                <el-button size="small" type="danger" round
                                    >删除</el-button
                                >
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: center; margin: 24px 0">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="pageSize"
                    :total="characters.length"
                    v-model:current-page="currentPage"
                />
            </div>
        </el-card>
        <!-- 编辑对话框 -->
        <el-dialog
            v-model="showEditDialog"
            title="编辑角色数据"
            width="600px"
            center
        >
            <el-form :model="editForm" label-width="120px">
                <el-form-item label="角色名称">
                    <el-input v-model="editForm.name" />
                </el-form-item>
                <el-form-item label="角色职位">
                    <el-input v-model="editForm.title" />
                </el-form-item>
                <el-form-item label="角色简介">
                    <el-input v-model="editForm.desc" />
                </el-form-item>
                <el-form-item label="头像链接">
                    <el-input v-model="editForm.avatar" />
                </el-form-item>
                <el-form-item label="小视频下方介绍">
                    <el-input v-model="editForm.rightText" />
                </el-form-item>
                <el-form-item label="背景视频链接">
                    <el-input v-model="editForm.bgVideo" />
                </el-form-item>
                <el-form-item label="图片链接">
                    <el-input v-model="editForm.leftImg" />
                </el-form-item>
                <el-form-item label="头像框图片链接">
                    <el-input v-model="editForm.frameImg" />
                </el-form-item>
                <el-form-item label="视频链接2">
                    <el-input v-model="editForm.videoRight" />
                </el-form-item>
                <el-form-item label="出现顺序">
                    <el-input-number v-model="editForm.sortByNumber" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="showEditDialog = false">取消</el-button>
                <el-button
                    type="primary"
                    @click="handleEditSave"
                    :loading="editLoading"
                    >保存</el-button
                >
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { ElMessage } from "element-plus";
import {
    getAllCharactersData,
    updateCharacterData,
    deleteCharacterData,
} from "./api";

const characters = ref([]);
const searchName = ref("");
const currentPage = ref(1);
const pageSize = 5;

const filteredCharacters = computed(() => {
    return characters.value.filter((item) => {
        return searchName.value
            ? (item.name || "").includes(searchName.value)
            : true;
    });
});
const pagedCharacters = computed(() => {
    const start = (currentPage.value - 1) * pageSize;
    return filteredCharacters.value.slice(start, start + pageSize);
});

const showEditDialog = ref(false);
// 对应的 editForm 结构也要补全
const editForm = reactive({
    _id: "",
    name: "",
    title: "",
    desc: "",
    avatar: "",
    rightText: "",
    bgVideo: "",
    leftImg: "",
    frameImg: "",
    videoRight: "",
    sortByNumber: 0,
});
const editLoading = ref(false);
const operatorId = sessionStorage.getItem("user_id");

function fetchCharacters() {
    getAllCharactersData().then((res) => {
        characters.value = res;
        currentPage.value = 1;
    });
}

function openEdit(row) {
    Object.assign(editForm, row);
    showEditDialog.value = true;
}

function handleEditSave() {
    if (!editForm.name) {
        ElMessage.warning("角色名称不能为空");
        return;
    }
    editLoading.value = true;
    updateCharacterData(editForm._id, {
        operatorId,
        name: editForm.name,
        title: editForm.title,
        desc: editForm.desc,
        avatar: editForm.avatar,
        rightText: editForm.rightText,
        bgVideo: editForm.bgVideo,
        leftImg: editForm.leftImg,
        frameImg: editForm.frameImg,
        videoRight: editForm.videoRight,
        sortByNumber: editForm.sortByNumber,
    })
        .then((res) => {
            ElMessage.success(res.message || "更新成功");
            showEditDialog.value = false;
            fetchCharacters();
        })
        .catch((err) => {
            ElMessage.error(err?.error || "更新失败");
        })
        .finally(() => {
            editLoading.value = false;
        });
}

function handleDelete(row) {
    deleteCharacterData(row._id, operatorId)
        .then((res) => {
            ElMessage.success(res.message || "删除成功");
            fetchCharacters();
        })
        .catch((err) => {
            ElMessage.error(err?.error || "删除失败");
        });
}

onMounted(fetchCharacters);
</script>

<style scoped>
.manage-characters-page {
    padding: 32px 0;
    display: flex;
    justify-content: center;
}
</style>